<meta charset="utf-8">
<nz-spin [nzSpinning]="_isSpinning">
<form nz-form  nz-col  [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)">
  <div nz-form-item nz-row>
    <h3>新增/修改专题</h3>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSpan]="3">
      <label nz-form-item-required>标题</label>
    </div>
    <div nz-col [nzSpan]="8" nz-form-control [nzValidateStatus]="getFormControl('title')" nzHasFeedback>
      <nz-input formControlName="title" [(ngModel)] = "title" [nzType]="'text'" [nzPlaceHolder]="'请输入标题'" [nzSize]="'large'" >
      </nz-input>
      <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('required')">请输入标题!</div>
      <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('duplicated')">标题是多余的！</div>
      <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').pending">校验中...</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-col [nzSpan]="3" nz-form-label>
      <label nz-form-item-required>发布状态</label>
    </div>
    <div nz-col [nzSpan]="8" nz-form-control [nzValidateStatus]="getFormControl('status')" nzHasFeedback>
        <nz-select formControlName="status" [nzSize]="'large'" [(ngModel)]="status" >
          <nz-option [nzLabel]="'未发布'" [nzValue]="'0'"></nz-option>
          <nz-option [nzLabel]="'已发布'" [nzValue]="'1'"></nz-option>
          <nz-option [nzLabel]="'已下架'" [nzValue]="'2'"></nz-option>
        </nz-select>

      <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('required')">请确认密码！</div>
      <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('confirm')">您输入的两个密码不一致！</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-col [nzSpan]="3" nz-form-label>
      <label nz-form-item-required>专题简介</label>
    </div>
    <div nz-col [nzSpan]="8" nz-form-control [nzValidateStatus]="getFormControl('description')">
      <nz-input formControlName="description" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'write any thing'" [(ngModel)]="description" [nzSize]="'large'">
      </nz-input>
      <div nz-form-explain *ngIf="getFormControl('description').dirty&&getFormControl('description').hasError('required')">请在这里写点什么！</div>
    </div>
  </div>

  <div nz-form-item nz-row>
    <div nz-col [nzSpan]="3" nz-form-label>
      <label nz-form-item-required>上传封面图</label>
    </div>
    <div nz-col [nzSpan]="8" nz-form-control>
      <input type="hidden" formControlName="pic" value="picid">
      <app-previewimg  [(previewImgSrcs)]="previewImgSrcs" (previewImgFileChange)="toSet()"  [(previewImgFile)]="previewImgFile" [maxPic]="1" style="padding: 0px"></app-previewimg>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-col [nzSpan]="3" nz-form-label>
      <label nz-form-item-required>专题详情</label>
    </div>
    <div nz-col [nzSpan]="21">
      <quill-editor
        formControlName = "context"
        [(ngModel)]="context"
        [options]="editorOptions"
        (change)="onContentChanged($event)">
      </quill-editor>
    </div>
  </div>

  <div nz-form-item nz-row>
    <div nz-col [nzOffset]="3" [nzSpan]="21" nz-form-control>
      <button nz-button [nzType]="'primary'" style="float: left" [nzSize]="'large'"  (click)="submitFn()">提交</button>
      <button nz-button [nzSize]="'large'" style="float: right" (click)="resetForm($event)">重置</button>
    </div>
  </div>
</form>
<!--<div [disabled]="!validateForm.valid"></div>-->
</nz-spin>
